<template>
    <div class="login">
        <el-card>
            <div class="logoBox">
                <img src="@/assets/logo.png" draggable="false" alt="">
                <span class="title">后台管理系统</span>
            </div>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" class="demo-ruleForm"
                size="default" status-icon>
                <el-form-item label="" prop="name">
                    <el-input v-model="ruleForm.name" clearable placeholder="username" />
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input v-model="ruleForm.password" clearable show-password
                        placeholder="please input your password" @keyup.enter="submitForm(ruleFormRef)" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-loading="loading" @click="submitForm(ruleFormRef)">Login</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang='ts' name="Login">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import { login } from '@/api/login.ts'
const loading = ref(false)
const router = useRouter();
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    name: string
    password: string
}
const ruleForm = reactive<RuleForm>({
    name: '',
    password: '',
})
// console.log(111,ruleForm.name);

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 8, message: '密码不能少于8位', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    // 登录提示词语
    const loginPrompt = [
        `${ruleForm.name}，允许访问`,
        `终于等到你，还好我没停服(*^▽^*)`,
        `身份验证成功，欢迎访问٩(๑>◡<๑)۶ `,
        `可爱的人先说话 ヽ(^ω^)ﾉ`,
        `遇见你，仿佛命定轨迹`,
        '准备好起舞了吗?',
        `${ruleForm.name}，欢迎凯旋`,
        `${ruleForm.name}，别来无恙`,
        `无法守候，没你存在的宇宙`,
        `疾风亦有归途`,
    ]
    const getRandomPrompt = () => {
        return loginPrompt[Math.floor(Math.random() * loginPrompt.length)];
    }
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let para = { account: ruleForm.name, password: ruleForm.password }
            login(para).then((res: any) => {
                if (res.code === 200) {
                    let LoginData = res.data
                    let token = LoginData.tokenList.accessToken;
                    let userName = LoginData.admin.adminName;
                    let role_id = ''
                    if (LoginData.admin.role_id == 1) {
                        role_id = '超级管理员'
                    } else if (LoginData.admin.role_id == 0) {
                        role_id = '管理员'
                    } else {
                        role_id = '未知'
                    }

                    let startTime = new Date().getTime();
                    localStorage.setItem("token", token);
                    // localStorage.setItem("dateTime", startTime.toString());
                    localStorage.setItem("userName", userName);
                    localStorage.setItem("role_id", role_id);
                    router.push('/')
                    ElNotification({
                        title: '登录成功',
                        message: getRandomPrompt(),
                        type: 'success',
                    })
                } else {
                    ElMessage.error(`请求错误: ${res.msg}`)
                }
            }).finally(() => {
                loading.value = false
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style lang='scss' scoped>
.login {
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #f6f5f5, #f0d3d3);

    :deep(.el-card) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 408px;
        height: 302px;
        padding: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        border-radius: 20px;

        .logoBox {
            margin: 35px 0 28px 55px;
            position: relative;
            height: 46px;

            img {
                width: 135px;
            }

            .title {
                float: right;
                margin-right: 80px;
                line-height: 46px;
                font-weight: 800;
            }
        }

        .el-card__body {
            padding: 0 !important;
        }

        .el-input__inner {
            height: 36px;
        }

        .el-input__wrapper {
            border-radius: 12px;
            background-color: #f2f2f2de;
        }

        .el-button {
            width: 100%;
            height: 46px;
            background-color: #DE868F;
            border: 1px solid #BBBBBB;
            margin: 10px 0 0 0;
            padding: 0;
            border-radius: 8px;
        }

        .el-form {
            margin: 0px 50px;
        }
    }

}
</style>